HTML Attributes

HTML विशेषताएँ

HTML विशेषताएँ

HTML विशेषताएँ HTML तत्वों के बारे में अतिरिक्त जानकारी प्रदान करती हैं।

HTML विशेषताएँ

💡मूल प्रारूप:

<टैगनाम विशेषता='मान'>सामग्री</टैगनाम>

href विशेषता

<a>टैग एक हाइपरलिंक को परिभाषित करता है।hrefविशेषता उस पृष्ठ का URL निर्दिष्ट करती है जिस पर लिंक जाएगा:

उदाहरण

<a href="https://www.jassifteam.com">Visit Jassif Team</a>

आप हमारे HTML लिंक अध्याय में लिंक के बारे में अधिक जानेंगे।

href विशेषता

उत्तर

पूरा यूआरएल

href="https://www.example.com"

स्रोत विशेषता

<img>टैग का उपयोग HTML पेज में किसी छवि को एम्बेड करने के लिए किया जाता है।srcविशेषता प्रदर्शित होने वाली छवि का पथ निर्दिष्ट करती है:

उदाहरण

<img src="girl_image.jpg">

srcविशेषता में URL निर्दिष्ट करने के दो तरीके हैं:

1. पूर्ण यूआरएल

किसी अन्य वेबसाइट पर होस्ट की गई बाहरी छवियों के लिंक।

उदाहरण: src="https://www.jassifteam.com/images/girl_image.jpg"

⚠️टिप्पणियाँ:

बाहरी छवियाँ कॉपीराइट के अंतर्गत हो सकती हैं। यदि आप बिना अनुमति के इसका उपयोग करते हैं, तो आप कॉपीराइट कानूनों का उल्लंघन कर सकते हैं। इसके अतिरिक्त, आप बाहरी छवियों को नियंत्रित नहीं कर सकते; इसे अचानक हटाया या बदला जा सकता है.

2. सापेक्ष यूआरएल

वेबसाइट के भीतर होस्ट की गई छवि के लिंक।

यहां, डोमेन नाम यूआरएल के साथ नहीं जोड़ा गया है। यदि यूआरएल बिना किसी स्लैश के शुरू होता है, तो यह वर्तमान पृष्ठ से संबंधित है।

उदाहरण: src="images/girl_image.jpg"

💡सहायता नोट:

सापेक्ष यूआरएल का उपयोग करना लगभग हमेशा बेहतर होता है। यदि आप डोमेन बदलते हैं तो वे टूटते नहीं हैं।

चौड़ाई और ऊंचाई विशेषताएँ

<img>टैगwidthऔरheightइसमें ऐसी विशेषताएँ भी होनी चाहिए जो छवि की चौड़ाई और ऊँचाई (पिक्सेल में) निर्दिष्ट करती हों:

उदाहरण

<img src="girl_image.jpg" width="500" height="600">

📐सर्वश्रेष्ठ प्रणालियां:

पेज लेआउट को पूर्व-आवंटित करने और पेज लोडिंग गति में सुधार करने के लिए कुबम छवियों में चौड़ाई और ऊंचाई विशेषताएँ जोड़ें।

वैकल्पिक विशेषता

<img>टैग आवश्यक हैaltयदि किसी कारण से छवि प्रदर्शित नहीं की जा सकती है, तो विशेषता छवि के साथ प्रतिस्थापित करने के लिए पाठ को निर्दिष्ट करती है। यह एक धीमा कनेक्शन है, याsrcयह विशेषता में किसी त्रुटि या उपयोगकर्ता द्वारा स्क्रीन रीडर का उपयोग करने के कारण हो सकता है।

उदाहरण

<img src="girl_image.jpg" alt="Girl with a jacket">

उदाहरण

देखें कि यदि आप ऐसी छवि प्रदर्शित करने का प्रयास करते हैं जो मौजूद नहीं है तो क्या होता है:

<img src="image_typo.jpg" alt="Girl with a jacket">

आप हमारे HTML छवियाँ अध्याय में छवियों के बारे में अधिक जानेंगे।

♿अभिगम्यता:

altयह विशेषता दृष्टिबाधित उपयोगकर्ताओं और स्क्रीन रीडर्स के लिए आवश्यक है। अपनी छवियों को हमेशा सार्थक वैकल्पिक टेक्स्ट दें।

शैली विशेषता

styleकिसी तत्व में रंग, फ़ॉन्ट, आकार और बहुत कुछ जोड़ने के लिए विशेषताओं का उपयोग किया जाता है।

उदाहरण

<p style="color:red;">This is a red paragraph.</p>

आप हमारे HTML शैलियाँ अध्याय में शैलियों के बारे में अधिक जानेंगे।

रंग

style="color:red;"

फ़ॉन्ट आकार

style="font-size:20px;"

बाद में पैटर्न का रंग

style="background-color:yellow;"

लैंग विशेषता

वेब पेज की भाषा घोषित करने के लिए,<html>टैग के अंदरlangविशेषता कब जोड़ें यह खोज इंजनों और ब्राउज़रों की सहायता के लिए है।

निम्नलिखित उदाहरण अंग्रेजी को भाषा के रूप में निर्दिष्ट करता है:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

देश कोड भीlangआप विशेषता में भाषा कोड जोड़ सकते हैं. तो, पहले दो अक्षर HTML पृष्ठ की भाषा को परिभाषित करते हैं, और अंतिम दो अक्षर देश को परिभाषित करते हैं।

निम्नलिखित उदाहरण अंग्रेजी को भाषा और संयुक्त राज्य अमेरिका को देश के रूप में निर्दिष्ट करता है:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

आप हमारे HTML भाषा कोड संदर्भ में सभी भाषा कोड देख सकते हैं।

शीर्षक विशेषता

titleएक विशेषता किसी तत्व के बारे में कुछ अतिरिक्त जानकारी को परिभाषित करती है।

titleजब आप तत्व पर माउस ले जाते हैं तो विशेषता का मान टूलटिप के रूप में प्रदर्शित होता है:

उदाहरण

<p title="I'm a tooltip">This is a paragraph.</p>

ℹ️उपकरण सहायता:

शीर्षक विशेषता छिपी हुई जानकारी या अतिरिक्त स्पष्टीकरण प्रदान करने के लिए बहुत अच्छी है, लेकिन इसका उपयोग आवश्यक जानकारी के लिए नहीं किया जाना चाहिए।

हम लोअरकेस विशेषताओं का उपयोग करने की अनुशंसा करते हैं

HTML मानक को लोअरकेस विशेषता नामों की आवश्यकता नहीं है।

titleविशेषता (और अन्य सभी विशेषताएँ)titleयाTITLEअपरकेस या लोअरकेस में लिखा जा सकता है।

हालाँकि, W3C HTML में लोअरकेस विशेषताओं की अनुशंसा करता है, और XHTML जैसे सख्त दस्तावेज़ प्रकारों के लिए लोअरकेस विशेषताओं की आवश्यकता होती है।

📝जस्सिफ टीम सिफारिश:

जैसिफ टीम में हम हमेशा लोअरकेस विशेषता नामों का उपयोग करते हैं।

हम उद्धरण चिह्नों में विशेषता मान लिखने की अनुशंसा करते हैं

HTML मानक में विशेषता मानों के आसपास उद्धरण चिह्नों की आवश्यकता नहीं होती है।

हालाँकि, W3C HTML में उद्धरण चिह्नों की अनुशंसा करता है, और XHTML जैसे सख्त दस्तावेज़ प्रकारों के लिए उद्धरण चिह्नों की आवश्यकता होती है।

अच्छा:

<a href="https://www.jassifteam.com/html/">Visit our HTML tutorial</a>

सबसे ख़राब:

<a href=https://www.jassifteam.com/html/>Visit our HTML tutorial</a>

कभी-कभी आपको उद्धरण चिह्नों का उपयोग करने की आवश्यकता होती है। यह उदाहरणtitleविशेषता सही ढंग से प्रदर्शित नहीं होती क्योंकि इसमें एक स्थान है:

<p title=Description of Jassif Team>

💡जस्सिफ टीम सिफारिश:

जैसिफ़ टीम में हम हमेशा विशेषता मानों के आसपास उद्धरण चिह्नों का उपयोग करते हैं।

एकल या दोहरा उद्धरण चिह्न?

HTML में विशेषता मानों के आसपास दोहरे उद्धरण चिह्न बहुत आम हैं, लेकिन एकल उद्धरण चिह्नों का भी उपयोग किया जा सकता है।

कुछ स्थितियों में, सिंगल कोट्स का उपयोग करना आवश्यक होता है जब विशेषता मान में स्वयं डबल कोट्स होते हैं:

<p title='John "ShotGun" Nelson'>

या विपरीत:

<p title="John 'ShotGun' Nelson">

🔤स्थिरता:

समान उद्धरण चिह्नों का उपयोग करके अपने कोड में एकरूपता बनाए रखें। HTML में दोहरे उद्धरण चिह्न बहुत आम हैं।

अध्याय का सारांश

अभ्यास के माध्यम से सीखना

❓HTML विशेषता का उपयोग करने के लिए निम्नलिखित में से कौन सा सही सिंटैक्स है?

<img src='girl_image.jpg'>
✓ ठीक है! यह HTML विशेषता के लिए सही सिंटैक्स है
<img src('girl_image.jpg')>
✗ ग़लत! HTML विशेषताएँ कोष्ठक का उपयोग नहीं करती हैं
<img src:'girl_image.jpg'>
✗ ग़लत! HTML विशेषताएँ कोलन का उपयोग नहीं करती हैं